// 动态路由：为了解决什么样的账户获取什么样的地址；若只是静态路由，则任何账号都可以通过地址访问任何页面，忽略了账户的限制；
// 用户登录成功后，立即获取该账户的路由，否则会进入404页面；

import Vue from 'vue';
import VueRouter from 'vue-router';
// vuex的store实例对象
import store from '@/store';
import { Notification } from 'element-ui';


// 静态路由
import static_routes from './static_routes';

// 全局变量；按需加载要加{}
import global from '@/plugins/global';

// 插件
Vue.use(VueRouter)

const router = new VueRouter({
	routes: static_routes,
});

// 检查路由是否已存在
let checkRouteExist = (route) => {
	// 获取所有路由信息
	let routes = router.getRoutes();
	// 判断是否存在
	return routes.some((item) => item.name === route.name);
}

// 全局--前置守卫
router.beforeEach(async (to, from, next) => {

	// 查询静态路由，是否匹配目标地址(to)
	let target_route = static_routes.find((route) => route.name === to.name);

	// 目标地址不是静态路由，属于权限路由
	if (!target_route) {
		// 提取access_token
		let access_token = sessionStorage.access_token;
		// 账户状态：未登录状态
		if (!access_token) {
			Notification.error({
				title: `错误`,
				message: '禁止访问，请登录账户！',
			});
			// 重定向
			next({ path: '/login', query: { redirect: to.fullPath } });
			return;
		}
		// 账户状态：登录
		// 防止重复请求动态路由，只请求一次
		if (global.is_route_unload) {
			let role_id = sessionStorage.role_id;
			// 根据账户角色，加载路由权限
			await store.dispatch('role/load_route_permission', { role_id });
			// 获取store中的getters路由配置对象
			let route_tree = store.getters['role/route_tree'];
			// 动态添加路由
			route_tree.forEach((route) => {
				// 查验路由是否已注册
				let isExist = checkRouteExist(route);
				// 路由：已注册，跳过本路由
				if (isExist) {
					return;
				}
				// 路由：未注册，正常注册
				router.addRoute(route);
			})
			// 最后添加404页面
			router.addRoute({
				path: '*',
				name: 'NotFound',
				meta: {
					// requires_auth: false,
					route_title: '访问地址错误',
				},
				component: () => import( /* webpackChunkName: "NotFound" */ '@/views/NotFound.vue')
			});
			// 修改路由加载状态
			global.is_route_unload = false;
			// 触发重定向
			return next({ ...to, replace: true });
		}
		// 判断目标地址是否拥有权限
	}

	// 目标地址是静态路由，判断是否登录认证
	let is_require_auth = target_route?.meta.requires_auth;
	// 静态路由，无需认证，直接放行
	if (!is_require_auth) {
		// 放行: 可以写成一个 return next();
		next();
		return;
	}
	// 静态路由，需要认证(暂时略过)

	// 终止：页面变为空白
	// next(false);
});


// 全局--解析守卫

// 全局--后置守卫
router.afterEach((to, from) => {
	// console.log(to);
	// 修改页面标题
	let { route_title } = to.meta;
	// 设置默认标题
	document.title = route_title ? `${route_title}--CMS系统` : 'CMS系统';
});

export default router
